<script setup lang="ts">
import { onMounted, ref } from 'vue'

// 分类列表
const categories = ref([
  { id: 0, name: '全部' },
  { id: 1, name: '推荐' },
  { id: 2, name: '最新' },
  { id: 3, name: '热门' },
  { id: 4, name: '关注' },
])

// 当前选中的分类
const currentCategory = ref(0)

// 帖子列表
const posts = ref([
  {
    id: 1,
    title: '分享一本好书',
    content: '最近读了一本非常棒的书，推荐给大家...',
    images: [
      '/static/images/books/book1.jpg',
      '/static/images/books/book2.jpg',
    ],
    avatar: '/static/images/avatar.svg',
    nickname: '张三',
    createTime: '2025-03-20 10:00:00',
    likeCount: 128,
    commentCount: 32,
    shareCount: 16,
  },
])

// 加载状态
const loading = ref(false)
const refreshing = ref(false)
const hasMore = ref(true)

// 切换分类
function switchCategory(categoryId: number) {
  if (currentCategory.value === categoryId) {
    return
  }

  currentCategory.value = categoryId
  posts.value = []
  hasMore.value = true
  loadPosts()
}

// 加载帖子列表
function loadPosts() {
  if (loading.value || !hasMore.value) {
    return
  }

  loading.value = true

  // 模拟加载数据
  setTimeout(() => {
    loading.value = false
    hasMore.value = false
  }, 1000)
}

// 加载更多
function loadMore() {
  loadPosts()
}

// 下拉刷新
function onRefresh() {
  refreshing.value = true
  posts.value = []
  hasMore.value = true

  // 模拟刷新数据
  setTimeout(() => {
    refreshing.value = false
    loadPosts()
  }, 1000)
}

// 跳转到帖子详情
function goToDetail(id: number) {
  uni.navigateTo({
    url: `/pages/post/detail/index?id=${id}`,
  })
}

// 预览图片
function previewImage(images: string[], current: number) {
  uni.previewImage({
    urls: images,
    current: images[current],
  })
}

// 格式化时间
function formatTime(time: string) {
  const date = new Date(time)
  const now = new Date()
  const diff = now.getTime() - date.getTime()

  // 小于1分钟
  if (diff < 60 * 1000) {
    return '刚刚'
  }

  // 小于1小时
  if (diff < 60 * 60 * 1000) {
    return `${Math.floor(diff / (60 * 1000))}分钟前`
  }

  // 小于24小时
  if (diff < 24 * 60 * 60 * 1000) {
    return `${Math.floor(diff / (60 * 60 * 1000))}小时前`
  }

  // 小于30天
  if (diff < 30 * 24 * 60 * 60 * 1000) {
    return `${Math.floor(diff / (24 * 60 * 60 * 1000))}天前`
  }

  // 大于30天
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
}

// 页面加载
onMounted(() => {
  loadPosts()
})
</script>

<template>
  <view class="container">
    <!-- 分类列表 -->
    <scroll-view class="category-list" scroll-x>
      <view
        v-for="item in categories"
        :key="item.id"
        class="category-item"
        :class="{ active: currentCategory === item.id }"
        @click="switchCategory(item.id)"
      >
        {{ item.name }}
      </view>
    </scroll-view>

    <!-- 帖子列表 -->
    <scroll-view
      class="post-list"
      scroll-y
      :refresher-enabled="true"
      :refresher-triggered="refreshing"
      @scrolltolower="loadMore"
      @refresherrefresh="onRefresh"
    >
      <view v-for="post in posts" :key="post.id" class="post-item" @click="goToDetail(post.id)">
        <view class="post-header">
          <image class="avatar" :src="post.avatar" mode="aspectFill" />
          <view class="user-info">
            <view class="nickname">
              {{ post.nickname }}
            </view>
            <view class="time">
              {{ formatTime(post.createTime) }}
            </view>
          </view>
        </view>

        <view class="post-content">
          <view class="title">
            {{ post.title }}
          </view>
          <view class="content">
            {{ post.content }}
          </view>
          <view v-if="post.images && post.images.length > 0" class="image-list">
            <image
              v-for="(image, index) in post.images"
              :key="index"
              :src="image"
              mode="aspectFill"
              @click.stop="previewImage(post.images, index)"
            />
          </view>
        </view>

        <view class="post-footer">
          <view class="action-item">
            <text class="iconfont icon-like" />
            <text class="count">
              {{ post.likeCount }}
            </text>
          </view>
          <view class="action-item">
            <text class="iconfont icon-comment" />
            <text class="count">
              {{ post.commentCount }}
            </text>
          </view>
          <view class="action-item">
            <text class="iconfont icon-share" />
            <text class="count">
              {{ post.shareCount }}
            </text>
          </view>
        </view>
      </view>

      <!-- 加载更多 -->
      <view v-if="posts.length > 0" class="load-more">
        <text v-if="loading">
          加载中...
        </text>
        <text v-else-if="!hasMore">
          没有更多了
        </text>
      </view>

      <!-- 空状态 -->
      <view v-if="posts.length === 0 && !loading" class="empty">
        <image class="empty-icon" src="/static/images/empty.svg" mode="aspectFit" />
        <view class="empty-text">
          暂无相关帖子
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.category-list {
  background: #fff;
  white-space: nowrap;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;

  .category-item {
    display: inline-block;
    padding: 10rpx 30rpx;
    margin: 0 10rpx;
    font-size: 28rpx;
    color: #666;
    border-radius: 30rpx;

    &.active {
      background: #4caf50;
      color: #fff;
    }
  }
}

.post-list {
  flex: 1;
  height: 0;
}

.post-item {
  background: #fff;
  margin-bottom: 20rpx;
  padding: 30rpx;

  .post-header {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;

    .avatar {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      margin-right: 20rpx;
    }

    .user-info {
      flex: 1;

      .nickname {
        font-size: 28rpx;
        color: #333;
        margin-bottom: 6rpx;
      }

      .time {
        font-size: 24rpx;
        color: #999;
      }
    }
  }

  .post-content {
    .title {
      font-size: 32rpx;
      color: #333;
      font-weight: bold;
      margin-bottom: 16rpx;
    }

    .content {
      font-size: 28rpx;
      color: #666;
      line-height: 1.6;
      margin-bottom: 20rpx;
    }

    .image-list {
      display: flex;
      flex-wrap: wrap;
      margin: 0 -10rpx;

      image {
        width: calc(33.33% - 20rpx);
        height: 200rpx;
        margin: 10rpx;
        border-radius: 8rpx;
      }
    }
  }

  .post-footer {
    display: flex;
    margin-top: 20rpx;
    padding-top: 20rpx;
    border-top: 1rpx solid #eee;

    .action-item {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;

      .iconfont {
        font-size: 36rpx;
        color: #999;
        margin-right: 10rpx;
      }

      .count {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
}

.load-more {
  text-align: center;
  padding: 30rpx 0;

  text {
    font-size: 24rpx;
    color: #999;
  }
}

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100rpx 0;

  .empty-icon {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 30rpx;
  }

  .empty-text {
    font-size: 28rpx;
    color: #999;
  }
}
</style>
